<!--  -->
<template>
  <div>
    <div class="nav">订单表</div>

    <van-card
      v-for="(val, index) in AllOrder"
      :key="index"
      num="1"
      tag="已下单"
      :price="val.order.totalPrices"
      :desc="val.stuffs[0].stuffDesc"
      :title="val.stuffs[0].stuffName"
      :thumb="val.stuffs[0].stuffImg"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
import { getAllOrder } from "../../api/order";
export default {
  name: "Order",
  data() {
    return {
      AllOrder: [],
    };
  },
  methods: {
    async create_getAllOrder() {
      try {
        let { data } = await getAllOrder(this.userInfo.username);
        console.log(data);
        if (data.status === 500) return Toast.fail("获取订单失败");
        this.AllOrder = data.data.reverse();
      } catch (error) {
        console.log(error);
        if (!this.userInfo.token) {
          Toast.fail("请先登录!");
          this.$router.replace("/my");
        }
      }
    },
  },
  created() {
    this.create_getAllOrder();
  },
  activated() {
    this.create_getAllOrder();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>


<style lang= "less" scoped>
.nav {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: skyblue;
  font-weight: 600;
  color: white;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>